<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>网站后台管理模版</title>
    <script src="../../static/admin/js/vue.js"></script>
    <script src="../../static/admin/js/axios-0.18.0.js"></script>
    <link rel="stylesheet" type="text/css" href="../../static/admin/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="../../static/admin/css/admin.css"/>
    <link rel="stylesheet" href="../../static/admin/element-ui/lib/theme-chalk/index.css">
    <script src="../../static/admin/element-ui/lib/index.js"></script>
    <script src="../../static/admin/layui/layui.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../static/admin/js/common.js" type="text/javascript" charset="utf-8"></script>

</head>

<body>
<div class="page-content-wrap" id="app-question">
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <el-button type="success" @click="addgsForm()" icon="el-icon-plus"></el-button>
            <el-dialog :title="title" width="30%" :visible.sync="dialogAddgsVisible" @close="closeDialogAddgsVisible"
                       :modal-append-to-body="false">
                <el-form :model="question" ref="question" label-width="100px">
                    <el-form-item label="题目">
                        <el-input v-model="question.question"
                                  style="width: 75%"
                                  placeholder="请输入题目"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogAddgsVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveQuestion()">确 定</el-button>
                </span>
            </el-dialog>
            <div class="layui-inline">
                <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
                       class="layui-input">
            </div>
            <button class="layui-btn layui-btn-normal" lay-submit="search">搜索</button>
        </div>
    </form>
    <div class="layui-form" id="table-list">
        <template>
            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        type="index"
                        label="试题编号"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="question"
                        label="题目"
                        width="400">
                </el-table-column>
                <el-table-column
                        label="选项"
                        width="300">
                    <template slot-scope="scope">
                        <el-select size="small" value-key="Code" v-model="scope.row.id" placeholder="请选择">
                            <el-option v-for="item in scope.row.options"
                                       :key="item.id"
                                       :label="item.option"
                                       :value="item">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column
                        label="添加"
                        width="100">
                    <el-button type="success" @click="addgsForm11" icon="el-icon-plus" circle></el-button>
                    <el-dialog :title="title1" width="30%" :visible.sync="dialogAddgsVisible1" @close="closeDialogAddgsVisible1"
                               :modal-append-to-body="false">
                        <el-form :model="option" ref="option" label-width="100px">
                            <el-form-item label="题目">
                                <el-input v-model="option.option"
                                          style="width: 75%"
                                          placeholder="请输入问题"></el-input>
                            </el-form-item>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="dialogAddgsVisible1 = false">取 消</el-button>
                            <el-button type="primary" @click="saveQuestionOption()">确 定</el-button>
                        </span>
                    </el-dialog>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                class="el-icon-delete"
                                @click="handleEdit(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
    </div>
</div>
<script>
    layui.use(['jquery'], function () {
        let $ = layui.jquery;
        //修改状态
        $('#table-list').on('click', '.table-list-status', function () {
            let That = $(this);
            let status = That.attr('data-status');
            let id = That.parent().attr('data-id');
            if (status == 1) {
                That.removeClass('layui-btn-normal').addClass('layui-btn-warm').html('隐藏').attr('data-status', 2);
            } else if (status == 2) {
                That.removeClass('layui-btn-warm').addClass('layui-btn-normal').html('显示').attr('data-status', 1);
            }
        })
    });
</script>
<script>
    const app = new Vue({
        el: "#app-question",
        data: {
            tableData: [{
                id: "",
                question: "",
            }],
            question: {
                questionnaireId: "",
                question: ""
            },
            title: "",
            title1: "",
            dialogAddgsVisible: false,
            dialogAddgsVisible1: false,
            // 对话框显示与否
            dialogVisible: false,
            dataloading: false,
            dialogVisible1: false,
            dataloading1: false,
            option: {
                questionId: "",
                option: "",
                score: ""
            }
        },
        methods: {
            //查询所有问题和选项
            findQuestionList(id) {
                axios.get("/testSoul/findSoulQuestionVo/" + id,).then(resp => {
                    this.tableData = resp.data;
                })
            },

            findQuestionId(row) {
                this.option.questionId = row.id;
            },

            <!--新增题目模态框-->
            addgsForm() {
                this.dialogAddgsVisible = true;
                this.title = "请输入题目"
            },

            <!--关闭或取消模态框，清空值-->
            closeDialogAddgsVisible() {
                this.$refs.addForm.resetFields();//element封装的方法,清空模态框的值
                this.title = "" //初始化title的值
                this.question.question = "";//初始化addForm中的值
            },

            <!--新增问题模态框-->
            addgsForm1() {
                this.dialogAddgsVisible1 = true;
                this.title1 = "请输入问题"
            },

            <!--关闭或取消模态框，清空值-->
            closeDialogAddgsVisible1() {
                this.$refs.addForm.resetFields();//element封装的方法,清空模态框的值
                this.title1 = "" //初始化title的值
                this.option.option = "";//初始化addForm中的值
                this.option.score = "";
            },

            <!--保存题目-->
            saveQuestion() {
                axios.post("/testSoul/saveQuestion", this.question)
                    .then(resp => {
                        this.dialogAddgsVisible1 = false;
                        this.findQuestionList(this.questionnaireId);
                    })
            },

            <!--保存问题-->
            saveQuestionOption() {
                axios.post("/testSoul/saveQuestionOption", this.option)
                    .then(resp => {
                        this.dialogAddgsVisible1 = false;
                        this.findQuestionList(this.questionnaireId);
                    })
            },

            handleEdit(row) {
                axios.get("/testSoul/deleteByQuestionId/" + row.id).then(resp => {
                    this.findQuestionList(this.questionnaireId);
                })
            }
        },
        created() {
            //查询所有试卷
            let id = location.search.split("=")[1];
            this.question.questionnaireId = id;
            this.findQuestionList(id);
        }
    });
</script>
</body>

</html>